<template>
	
	<view class="pics">
			  <scroll-view   class="left"   scroll-y   >
				  
				  <!--  让第一个显示样式 -->
						<view       :class=" active ===  index ? 'active':''"   
						 @click="leftClickEvt(index,it.id)"
						 v-for=" (it,index) in  cates"     :key="it.id">{{it.title}}</view>
						
				</scroll-view>
				
				<scroll-view scroll-y="true"   class="right" >
					<view   class="item"  v-for=" item  in secondData"    :key="item.id">
						 <image :src="item.img_url" @click="previewImg(item.img_url)"></image>
						 <text>{{item.title}}</text>
					</view>
					<text     v-if = " secondData.length === 0? true :false ">-----暂无数据-----</text>
				</scroll-view>
		  
	</view>
</template>
         
<script>
	
	export  default  {
		
		
		
		data (){
			
			return  {
				//cate美食的意思
				cates:[],
				active:0,
				secondData:[],
			   img_url:'https://img0.baidu.com/it/u=4027247085,3038939687&fm=253&fmt=auto&app=120&f=JPEG?w=640&h=426' 
			}
		},
		
		
		
		methods:{
			async  getPicsEvt(){
				/* 3、 获取商品分类数据 */
				 const   res =   await this.$myRequest({
					  url:'/api/getimgcategory'
				})
				
				this.cates =  res.data.message
				this.leftClickEvt(0,this.cates[0].id)
			},
			
			
			//  点击赋予相应样式,及同时渲染右侧页面
		async	leftClickEvt(index,id){
				this.active = index
				
				// 点击，调接口，获取右侧数据
				/* 4、获取分类详数据 */
			     const  res = await  this.$myRequest({
					 url:'/api/getimages/' + id
				 })
				 
				 if( res.data.message){
					 this.secondData = res.data.message.map((it)=>{
						
						  it.img_url  =  this.img_url
						   return	it
					 })
					 
				 }else{
					   this.secondData =  []
				 }
				    
				},
				
				//预览图片
				previewImg(current){
					
					
					const  urls = this.secondData.map((it)=>{
						
						return    it.img_url
					})
					
					uni.previewImage({
						urls:urls,
						/* current 为当前显示图片的链接/索引值 */
						current:current
					})
					
				}
				
				
		},
		
		onLoad(){
			   this.getPicsEvt()
		}
	}
</script>

<style  lang="scss"  scoped>
	  page{
		  height: 100%;
		  
		  .pics{
			  height: 100%;
			  display: flex;
			  
			  .left{
				  width: 200rpx;
				  height: 100%;
				  border-right: 1px  solid  #eee;
				  
				   view {
					  height: 60px;
					  line-height: 60px;
					  color: #333;
					  text-align: center;
					  font-size: 30rpx;
					  border-top: 1px solid  #eee;
					  
				  }
				  
				  .active{
					  background-color: $shop-color;
					  color: #fff;
				  }
			  }
			  
			  
			  .right{
				  height: 100%;
				  width: 520rpx;
				  margin:10rpx auto;
				  .item{
					  
					  image{
						  width:520rpx;
						  height:520rpx;
						  border-radius: 5px;
						  
					  }
					  
					  text{
						  font-size: 30rpx;
						  line-height: 60rpx;
					  }
				  }
			    
				text{
					 display: block;
					 letter-spacing: 5px;
					 text-align:center;
					 font-size: 26rpx;
				}
			  }
		  }
	  }
	
</style>